<template>
  <div class="app-container">
    <el-row class="roleInputRow">
      <el-col :span="18">
        <div id="Boer" style="width: 1200px; height: 700px"></div>
        <!-- <div id="scatter" style="width: 1100px; height: 350px"></div> -->
      </el-col>

      <el-form
        ref="requestForm"
        :inline="false"
        class="right-condition"
        :model="requestForm"
        label-width="120px"
      >
        <el-col :span="6">
          <el-form-item label="起始频率:" prop="startUnit">
            <el-input
              v-model="formItem.startUnit"
              type="text"
              placeholder=""
              style="width: 220px"
            >
              <i slot="suffix" style="font-style: normal; margin-right: 10px">
                /{{ freqUnit }}
              </i>
            </el-input>
          </el-form-item>

          <el-form-item label="终止频率:" prop="endUnit">
            <el-input
              v-model="formItem.endUnit"
              type="text"
              placeholder=""
              style="width: 220px"
            >
              <i slot="suffix" style="font-style: normal; margin-right: 10px">
                /{{ freqUnit }}
              </i>
            </el-input>
          </el-form-item>

          <el-form-item label="步进:" prop="step">
            <el-select v-model="formItem.step" style="width: 220px">
              <el-option
                v-for="item in stepList"
                :key="item.id"
                :label="item.val"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
// import * as Echarts from 'echarts/lib/echarts'

export default {
  name: 'Boer',
  data: () => {
    return {
      requestForm: {},
      formItem: {
        startUnit: '',
        endUnit: '',
        step: '',
      },
      selected: '',
      list: [],
      stepList: [
        {
          id: 25,
          val: '25kHz',
        },
        {
          id: 50,
          val: '50kHz',
        },
        {
          id: 100,
          val: '100kHz',
        },
      ],
      freqUnit: 'Mhz',
      orgOptions: {},
      scatterOptions: {},
    }
  },
  mounted () {
    this.getTraceData()
  },
  methods: {
    getTraceData () {
      let dom = document.getElementById('Boer')
      let myChart = this.$echarts.init(dom)
      myChart.showLoading({
        text: '加载中...请稍后',
        color: '#47B485',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
        zlevel: 0
      })
      axios
        .get('http://47.118.20.181:8080/boer/records')
        .then(
          function (response) {

            if (response.data.data.length == 0) {
              const dom = document.getElementById('Boer')
              dom.innerHTML = '该设备暂无数据'
              dom.removeAttribute('_echarts_instance_')
              return
            }
            let [x, max, avg, noiseAvg] = onRecords(response.data)
            this.orgOptions = {
              title: {
                text: '波尔平台调用',
                left: 'center',
              },
              // backgroundColor: 'black',
              // darkMode: true,
              tooltip: {
                trigger: 'axis',
              },
              legend: {
                show: true,
                data: ['最大值', '平均值', '噪音'],
                left: 'left',
                formatter: function (name) {
                  return name + '(' + 'dbuv' + ')'
                },
              },
              xAxis: {
                data: x,
                axisLabel: {
                  // eslint-disable-next-line no-unused-vars
                  formatter: function (value, index) {
                    return value + 'MHz'
                  },
                },
              },
              yAxis: {
                type: 'value',
              },
              dataZoom: [
                {   // 这个dataZoom组件，默认控制x轴。
                  type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                  start: 0,      // 左边在 10% 的位置。
                  end: 100         // 右边在 60% 的位置。
                }
              ],
              series: [
                {
                  name: '最大值',
                  type: 'line',
                  data: max,
                },
                {
                  name: '平均值',
                  type: 'line',
                  data: avg,
                },
                {
                  name: '噪音',
                  type: 'line',
                  data: noiseAvg,
                }
              ],
            }
            myChart.hideLoading()
            myChart.setOption(this.orgOptions)
          }.bind(this)
        )
    },
  },
}
// eslint-disable-next-line no-unused-vars
function onRecords (_data) {
  // eslint-disable-next-line no-unused-vars
  let { startFreq, stepFreq, data } = _data
  // eslint-disable-next-line no-unused-vars
  // let { frequency, span, unit, ref, mr } = remarks
  // let startFreq = frequency - span / 2
  // let trace = traces[0].trace
  // let pointCount = trace.length

  // let step = span / pointCount
  // console.log(`step ${step}`)
  let freqPoint = []
  let traceMax = []
  let traceAvg = []
  let traceNoiseAvg = []
  let pointCount = data.length
  for (let i = 0; i < pointCount; i++) {
    freqPoint.push(parseInt((parseInt(startFreq) + i * parseInt(stepFreq)) / 1000000))
    let { avg, max, noiseAvg, occupancy } = data[i]
    traceMax.push(parseFloat(max).toFixed(2))
    traceAvg.push(parseFloat(avg).toFixed(2))
    traceNoiseAvg.push(parseFloat(noiseAvg).toFixed(2))
  }
  return [freqPoint, traceMax, traceAvg, traceNoiseAvg]
}
</script>

<style scoped>
.right-condition {
  margin-top: 4rem;
}
</style>
